<!-- 提现 -->
<template>
  <view>
    <!-- <u-navbar title="推广中心" :autoBack="true"> </u-navbar> -->
    <view class="promotion-container">
      <!-- 顶部用户信息卡片 -->
      <view class="user-card">
        <view class="user-header">
          <image
            class="avatar"
            :src="dataDetails.avatar_show"
            mode="aspectFill"
          />
          <view class="user-meta">
            <text class="username">{{ dataDetails.nickname }}</text>
            <view class="referral-code">
              <text class="code-label">推荐码</text>
              <text class="code-value">{{
                dataDetails.share_code ? dataDetails.share_code : "未注册或认证"
              }}</text>
              <image
                class="copy-icon"
                src="/static/icons/copy.png"
                @click="copyReferralCode"
              />
            </view>
          </view>
        </view>

        <view class="qrcode-action">
          <button class="qrcode-btn" @click="showQRCode(dataDetails)">
            <image class="qrcode-icon" src="/static/icons/qrcode.png" />
            <text>推广二维码</text>
          </button>
        </view>
      </view>

      <!-- 数据统计卡片 -->
      <view class="stats-card">
        <view class="stats-grid">
          <view class="stat-item" v-for="stat in statsList" :key="stat.label">
            <text class="stat-value">{{ stat.value }}</text>
            <text class="stat-label">{{ stat.label }}</text>
          </view>
        </view>
      </view>

      <!-- 提现卡片 -->
      <view class="withdraw-card">
        <view class="withdraw-header">
          <text class="title">可提现佣金</text>
          <text class="amount">¥{{ formatCurrency(dataDetails.income) }}</text>
        </view>
        <button class="withdraw-btn" @click="handleWithdraw">
          <text>立即提现</text>
        </button>
      </view>

      <!-- 功能菜单 -->
      <view class="menu-card">
        <view
          class="menu-item"
          v-for="item in menuItems"
          :key="item.name"
          @click="navigateTo(item.path)"
        >
          <view class="menu-left">
            <image class="menu-icon" :src="item.icon" />
            <text class="menu-text">{{ item.name }}</text>
          </view>
          <image class="arrow-icon" src="/static/icons/arrow-right.png" />
        </view>
      </view>

      <!-- 二维码弹窗 -->
      <!-- <uni-popup ref="qrcodePopup" type="center" :is-mask-click="true">
        <view class="qrcode-dialog">
          <text class="dialog-title">我的推广二维码</text>
          <view class="qrcode-wrapper">
            <image class="qrcode-img" :src="qrcodeUrl" mode="widthFix" />
          </view>
          <text class="dialog-tip">邀请好友扫码注册，即可获得佣金奖励</text>
          <view class="dialog-actions">
            <button class="action-btn secondary" @click="qrcodePopup.close">
              取消
            </button>
            <button class="action-btn primary" @click="saveQRCode">
              保存二维码
            </button>
          </view>
        </view>
      </uni-popup> -->

      <u-popup
        :show="show"
        @close="close"
        @open="open"
        mode="center"
        :round="10"
        closeIcon
        closeIconPos="bottom-center"
      >
        <view>
          <view class="qrcode-dialog">
            <text class="dialog-title">我的推广二维码</text>
            <view class="qrcode-wrapper">
              <!-- <image class="qrcode-img" :src="qrcodeUrl" mode="widthFix" /> -->
              <u-qrcode value="https://uview.d3u.cn/"></u-qrcode>
            </view>
            <text class="dialog-tip">邀请好友扫码注册，即可获得佣金奖励</text>
            <view class="dialog-actions">
              <button class="action-btn secondary" @click="show = false">
                取消
              </button>
              <!-- <button class="action-btn primary" @click="saveQRCode">
                保存二维码
              </button> -->
            </view>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { onShow } from "@dcloudio/uni-app";
const show = ref(false);
import { getShareInfo } from "../../api/userInfo";
import { showToast } from "../../utils/toast";
// 用户信息
const userInfo = ref({
  name: "张小凡",
  avatar: "/static/avatars/default.png",
  referralCode: "VX2024",
});

onShow(async () => {
  await init();
});

// 统计数据
const stats = ref({
  totalCommission: 5680.5,
  availableCommission: 1250.0,
  orderCount: 42,
  teamCount: 18,
});

// 计算属性：将统计数据转换为数组方便渲染
const statsList = computed(() => [
  {
    label: "累计佣金(元)",
    value: formatCurrency(dataDetails.value.all_income),
  },
  {
    label: "分销订单",
    value: dataDetails.value.all_share_order,
  },
  {
    label: "团队人数",
    value: dataDetails.value.all_user_num,
  },
]);

// 菜单项配置
const menuItems = ref([
  {
    name: "订单明细",
    icon: "/static/icons/menu-order.png",
    path: "/pages/promotion/orders",
  },
  {
    name: "佣金明细",
    icon: "/static/icons/menu-commission.png",
    path: "/pages/promotion/commissions",
  },
  {
    name: "推广提现",
    icon: "/static/icons/menu-withdraw.png",
    path: "/pages/user/my_jiLu",
  },
  {
    name: "我的团队",
    icon: "/static/icons/menu-team.png",
    path: "/pages/user/component/teamlist",
  },
]);

// 格式化金额显示
const formatCurrency = (value) => {
  return Number(value).toFixed(2);
};

// 复制推荐码
const copyReferralCode = () => {
  uni.setClipboardData({
    data: userInfo.value.referralCode,
    success: () => {
      uni.showToast({
        title: "推荐码已复制",
        icon: "none",
      });
    },
  });
};

// 显示二维码弹窗
const showQRCode = (e) => {
  if (e.company_status != 3) {
    showToast("未通过审核，请耐心等待");
    return;
  }
  //   qrcodePopup.value.open();
  //   show.value = true;
  uni.navigateTo({
    url: `/pages/user/my_tuiguang_details?img=${e.share_img_show}`,
  });
};

// 提现操作
const handleWithdraw = () => {
  if (stats.value.availableCommission <= 0) {
    uni.showToast({
      title: "暂无可用佣金",
      icon: "none",
    });
    return;
  }
  uni.navigateTo({
    url: "/pages/user/component/Withdraw",
  });
};

// 导航到不同页面
const navigateTo = (path) => {
  uni.navigateTo({
    url: path,
  });
};

const close = () => {
  show.value = false;
};

const dataDetails = ref({});

const init = async () => {
  return await getShareInfo().then((res) => {
    console.log(res);
    dataDetails.value = res.data;
  });
  // try {
  //   const res = await getShareInfo();
  //   console.log(res);
  //   dataDetails.value = res.data;
  // } catch (error) {

  // }
};
</script>

<style lang="scss" scoped>
.promotion-container {
  padding: 50rpx 24rpx;
  background-color: #f8f8f8;

  //   min-height: 100vh;
}

/* 用户信息卡片 */
.user-card {
  background: linear-gradient(135deg, #4361ee, #3a0ca3);
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  color: #fff;
  box-shadow: 0 8rpx 24rpx rgba(67, 97, 238, 0.2);

  .user-header {
    display: flex;
    align-items: center;
    margin-bottom: 32rpx;

    .avatar {
      width: 96rpx;
      height: 96rpx;
      border-radius: 50%;
      border: 4rpx solid rgba(255, 255, 255, 0.3);
    }

    .user-meta {
      margin-left: 24rpx;

      .username {
        font-size: 36rpx;
        font-weight: 600;
        display: block;
        margin-bottom: 8rpx;
      }

      .referral-code {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        background-color: rgba(255, 255, 255, 0.15);
        border-radius: 40rpx;
        padding: 6rpx 16rpx 6rpx 12rpx;
        width: fit-content;

        .code-label {
          opacity: 0.8;
          margin-right: 8rpx;
        }

        .code-value {
          font-weight: 500;
          margin-right: 8rpx;
        }

        .copy-icon {
          width: 28rpx;
          height: 28rpx;
          opacity: 0.7;
        }
      }
    }
  }

  .qrcode-action {
    .qrcode-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(255, 255, 255, 0.15);
      color: #fff;
      height: 72rpx;
      border-radius: 40rpx;
      font-size: 28rpx;
      padding: 0 32rpx;
      margin: 0;

      .qrcode-icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }

      &::after {
        border: none;
      }
    }
  }
}

/* 数据统计卡片 */
.stats-card {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 32rpx 0;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);

  .stats-grid {
    display: flex;
    justify-content: space-around;

    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .stat-value {
        font-size: 40rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
      }

      .stat-label {
        font-size: 26rpx;
        color: #999;
      }
    }
  }
}

/* 提现卡片 */
.withdraw-card {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);

  .withdraw-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32rpx;

    .title {
      font-size: 30rpx;
      color: #666;
    }

    .amount {
      font-size: 36rpx;
      font-weight: 600;
      color: #ff6b6b;
    }
  }

  .withdraw-btn {
    background: linear-gradient(90deg, #ff6b6b, #ff8e8e);
    color: #fff;
    height: 88rpx;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;

    &::after {
      border: none;
    }
  }
}

/* 功能菜单卡片 */
.menu-card {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 0 32rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);

  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 112rpx;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .menu-left {
      display: flex;
      align-items: center;

      .menu-icon {
        width: 44rpx;
        height: 44rpx;
        margin-right: 24rpx;
      }

      .menu-text {
        font-size: 30rpx;
        color: #333;
      }
    }

    .arrow-icon {
      width: 32rpx;
      height: 32rpx;
      opacity: 0.5;
    }
  }
}

/* 二维码弹窗 */
.qrcode-dialog {
  background-color: #fff;
  width: 640rpx;
  border-radius: 24rpx;
  padding: 48rpx;
  box-sizing: border-box;

  .dialog-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    text-align: center;
    display: block;
    margin-bottom: 40rpx;
  }

  .qrcode-wrapper {
    background-color: #fff;
    border: 1rpx solid #eee;
    border-radius: 16rpx;
    padding: 32rpx;
    margin: 0 auto 40rpx;
    width: fit-content;

    .qrcode-img {
      width: 400rpx;
      height: 400rpx;
    }
  }

  .dialog-tip {
    font-size: 28rpx;
    color: #999;
    text-align: center;
    display: block;
    margin-bottom: 40rpx;
  }

  .dialog-actions {
    display: flex;
    justify-content: space-between;

    .action-btn {
      flex: 1;
      height: 88rpx;
      border-radius: 44rpx;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;

      &.secondary {
        background-color: #f5f5f5;
        color: #666;
        margin-right: 24rpx;
      }

      &.primary {
        background: linear-gradient(90deg, #4361ee, #3a0ca3);
        color: #fff;
      }

      &::after {
        border: none;
      }
    }
  }
}
</style>
